<!DOCTYPE html>
<header>
  <meta charset="UTF-8">
  <title>Game Canvas</title>
</header>
<body>
  <p><a href="finger-touch.html">触摸事件示例</a ></p>
  <p><a href="five-in-a-row.html">五子棋示例</a ></p>
  <p>Canvas 绘图示例</p>
<canvas id="myCanvas" width="800" height="600"></canvas>
  <script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');

    ctx.fillStyle = 'green';        // 设置填充颜色
    ctx.fillRect(0, 0, 100, 100);  // 绘制填充矩形(x, y, width, height)

    ctx.fillStyle = 'blue';     
    ctx.fillRect(100, 0,200, 100);  

    ctx.strokeStyle = 'red';       // 设置边框颜色
    ctx.lineWidth = 5;             // 设置边框宽度
    ctx.strokeRect(300, 0, 200, 150);  // 绘制边框矩形

    ctx.strokeStyle = 'black';     
    ctx.beginPath();               // 开始路径
    ctx.moveTo(500, 0);          // 移动画笔到起点
    ctx.lineTo(500, 200);          // 绘制线条到指定点
    ctx.lineTo(600, 300);
    ctx.lineTo(700, 100);
    ctx.closePath();               // 闭合路径（自动连接回起点）
    ctx.fillStyle = 'green';
    ctx.fill();                    // 填充路径
    ctx.stroke();                  // 绘制路径边框


    ctx.font = '30px Arial';
    ctx.fillStyle = 'black';
    ctx.fillText('Hello Canvas!', 100, 300);  // 填充文本
    ctx.strokeText('Stroke Text', 300, 300);  // 描边文本

    ctx.beginPath();
    ctx.arc(750, 200, 75, 0, Math.PI * 2);  // arc(x, y, radius, startAngle, endAngle)
    ctx.fillStyle = 'purple';
    ctx.fill();

    const img = new Image();
    img.src = 'image.jpg';
    img.onload = function() {
    ctx.drawImage(img, 500, 300, 200, 150);  // drawImage(img, x, y, width, height)
};

const gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
gradient.addColorStop(0, 'red');
gradient.addColorStop(1, 'yellow');
ctx.fillStyle = gradient;
ctx.fillRect(10, 350, 600, 200);


ctx.shadowColor = 'black';
ctx.shadowBlur = 20;
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;
ctx.fillStyle = 'white';
ctx.fillRect(10, 400, 600, 100);

ctx.save();                 // 保存当前状态
ctx.translate(400, 400);    // 平移原点
ctx.rotate(Math.PI / 4);    // 旋转45度
ctx.fillRect(-50, -50, 100, 100);
ctx.restore();              // 恢复之前的状态

    </script>
  </body>
</html>